<template>
	<BasicDrawer v-bind="$attrs" @register="registerDrawer" title="充电预警详情" width="1040px">
		<div class="content" v-if="awaitDate">
			<h1>{{ rowDate.warnId_dictText }} <a-tag :color="level[rowDate.level_dictText]">{{ rowDate.level_dictText
					}}风险</a-tag></h1>
			<!-- {{ rowDate. }} -->
			<a-descriptions title="基础信息" layout="vertical" :column="4">
				<a-descriptions-item label="充电站编码">{{ rowDate.warnStation }} </a-descriptions-item>
				<a-descriptions-item label="充电站名称">{{ rowDate.warnStation_dictText }} </a-descriptions-item>
				<a-descriptions-item label="所属城市">{{ rowDate.bizChargeStation.address }}</a-descriptions-item>
				<a-descriptions-item label="所属运营商" :span="2">
					{{ rowDate.operatorid_dictText }}
				</a-descriptions-item>
			</a-descriptions>
			<div class="main">
				<div class="mainleft">
					<img src="/@/assets/images/station/u336.png" alt="">
					<div class="imgr">
						<p> {{ rowDate.warnStakeId }}</p>
						<p><span>{{ rowDate.bizChargeStake?.name }}</span> <a-tag color="#2db7f5">{{
							rowDate.bizChargeStake?.poleType == 0 ? '交流' : '直流' }}</a-tag></p>
						<p><img src="/@/assets/images/station/u348.png" alt="">额定功率
							<span>{{ rowDate.bizChargeStake?.ratedPower }}kW</span>
						</p>
						<p><img src="/@/assets/images/station/u342.png" alt="">输出电压
							<span>DC{{ rowDate.bizChargeStake?.minOutputVoltage }}~{{
								rowDate.bizChargeStake?.maxOutputVoltage }}V</span>
						</p>
						<p><img src="/@/assets/images/station/u345.png" alt="">输出电流
							<span>{{ rowDate.bizChargeStake?.minOutputVoltage }}~{{
								rowDate.bizChargeStake?.maxOutputCurrent }}A</span>
						</p>
					</div>
				</div>
				<div class="mainright">
					<div class="mainrightonse" v-for="(item, index) in rowDate.remarks" :key="index">
						<a-space :size="5" align="center"> <span class="badge"
								:style="{ 'background': bagcolor[index] }"></span>
							<span>{{ Object.keys(item)[0] }}</span>
						</a-space>
						<p>{{ item[Object.keys(item)[0]] }}</p>
					</div>
					<!-- <div class="mainrightonse">
            <a-space align="center"> <span class="badge" style="background: #31ce2f;"> </span>
              充电机输出电流（A）</a-space>
            <p>59.4??</p>
          </div>
          <div class="mainrightonse">
            <a-space align="center"> <span class="badge" style="background:#30e8bb ;"></span>
              充电机输出电流（A）</a-space>
            <p>59.4??</p>
          </div> -->

				</div>
			</div>
			<!-- <a-descriptions title="充电过程曲线" layout="vertical"> -->
			<!-- <SingleLine :chartData="barDataSource" height="50vh" :option="{ title: { text: '充电过程曲线?', left: 'left' } }">
            </SingleLine> -->
			<!-- <lylineEts></lylineEts> -->
			<!-- </a-descriptions> -->
		</div>

	</BasicDrawer>

</template>
<script lang="ts" setup>
import { BasicDrawer, useDrawerInner } from '/src/components/Drawer';
// import lylineEts from '/@/components/chart/lylineEts.vue';

/**
 * 数据
 */
const awaitDate = ref(false);
const bagcolor = ref(['#31ce2f', '#30e8bb', '#1890ff']);
const level = ref({
	高: '#f5222d',
	中: '#faad14',
	低: '#13c2c2',
});
const rowDate = ref({});
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
	console.log('BasicDrawer数据数据数据data', data);
	awaitDate.value = true;
	rowDate.value = data;
});
</script>
<style lang="less" scoped>
.bacgclass1 {}

.content {
	box-sizing: border-box;
	padding: 0 20px;

	.main {
		display: flex;

		.mainleft {
			display: flex;
			align-items: center;

			img {
				width: 55px;
				height: 190px;
			}

			.imgr {
				margin-left: 10px;

				img {
					width: 16px;
					height: 16px;
					margin-right: 5px;
				}

				p {
					font-size: 12px;
					color: #999;

					&:nth-child(2) {
						margin-top: 10px;
					}
				}

				p:nth-of-type(1) {
					font-weight: 400;
					font-style: normal;
					font-size: 16px;
					color: rgb(0, 0, 0);
				}

				p:nth-of-type(2) {
					span:nth-of-type(1) {
						font-weight: 400;
						font-style: normal;
						font-size: 16px;
						color: black;
						margin-right: 5px;
					}
				}
			}
		}

		.mainright {
			margin-left: 60px;
			display: flex;
			justify-content: space-between;
			flex: 1;
			align-items: center;

			.mainrightonse {
				font-size: 14px;

				.badge {
					border-radius: 50%;
					display: inline-block;
					width: 15px;
					height: 15px;
				}

				text-align: center;

				p {
					font-size: 28px;
					color: #000;
					margin-bottom: 0px;
				}
			}
		}
	}
}
</style>
